<template>
	<view class="container">
		<u-skeleton rows="10" :loading="loading" :title="false"></u-skeleton>

		<view class="content-card" v-if="!loading">
			<u-row justify="space-between" align="top">
				<u-col span="7">
					<u--text text="食用农产品名称:" size="14" color="#303133"></u--text>
					<u--text :text="detail.productName" size="16" bold margin="8rpx 0"></u--text>
					<u--text text="数量(重量):" size="14" color="#303133" margin="20rpx 0 0 0"></u--text>
					<u--text :text="detail.weight" size="16" bold margin="8rpx 0"></u--text>
					<u--text text="生产者盖章或签名:" size="14" color="#303133" margin="20rpx 0 0 0"></u--text>
				</u-col>
				<u-col span="5">
					<u--text :text="'No: ' + detail.certificateNo" size="12" color="#606266" align="right"></u--text>
					<u--image :src="detail.qrCodeUrl" width="140rpx" height="140rpx" margin="10rpx 0"></u--image>
					<u--text text="扫码溯源更多信息" size="11" color="#909399"></u--text>
				</u-col>
			</u-row>

			<u--image :src="detail.signatureUrl" width="250rpx" height="120rpx" mode="aspectFit" margin="20rpx 0 30rpx 0"></u--image>
			
			<u-line dashed margin="0 0 30rpx 0"></u-line>

			<u-cell-group :border="false">
				<!-- 【核心修改点】: 使用 value-style 代替 /deep/ -->
				<u-cell title="联系方式" :value="detail.contact" :isLink="false" :border="false" title-width="110" :value-style="cellValueStyle"></u-cell>
				<u-cell title="生产主体" :value="detail.entityName" :isLink="false" :border="false" title-width="110" :value-style="cellValueStyle"></u-cell>
				<u-cell title="产地" :value="detail.origin" :isLink="false" :border="false" title-width="110" :value-style="cellValueStyle"></u-cell>
				<u-cell title="开具日期" :value="detail.issueDate" :isLink="false" :border="false" title-width="110" :value-style="cellValueStyle"></u-cell>
				<u-cell title="合格方式" :value="detail.qualifiedStyle" :isLink="false" :border="false" title-width="110" :value-style="cellValueStyle"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			certificateId: null,
			detail: {},
			loading: true,
			
			// 【新增】: 将样式对象定义在 data 中，方便复用
			cellValueStyle: {
				'text-align': 'right',
				'flex': '1',
				'overflow': 'hidden',
				'color': '#606266',
				'font-size': '14px',
				'white-space': 'pre-wrap' // 允许自动换行
			}
		};
	},
	onLoad(options) {
		uni.setNavigationBarTitle({
			title: '打印详情'
		});
		this.certificateId = options.id;
		this.fetchCertificateDetail();
	},
	methods: {
		fetchCertificateDetail() {
			this.loading = true;
			setTimeout(() => {
				// TODO: 调用接口
				this.detail = {
					id: this.certificateId,
					productName: '白菜',
					weight: '100斤',
					certificateNo: '5101172023080800027',
					qrCodeUrl: 'https://www.qrcode-generator.de/wp-content/uploads/2020/09/example-qr-code.png',
					signatureUrl: 'https://file.digitaling.com/e/2021/0401/1617260589882.png',
					contact: '18408246666',
					entityName: '六六六生产主体',
					origin: '众创空间',
					issueDate: '2023-08-08 11:41:05',
					qualifiedStyle: '委托检测, 自我承诺'
				};
				this.loading = false;
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.content-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>